<template>
  <div class="data-form partner-form" v-loading.fullscreen.lock="loading">
    <el-form label-width="auto" size="medium">
      <el-form-item label="分店名称">
        <el-input v-if="type==='add'" v-model="partnerForm.partnerName" class="form-input"></el-input>
        <span v-else>{{partnerForm.partnerName}}</span>
      </el-form-item>
      <el-form-item label="分店头像">
        <imgs-upload v-model="partnerForm.partnerHeadImg" :limit="1" :img-width="200" :img-height="200"></imgs-upload>
      </el-form-item>
      <el-form-item label="所属主店">
        <el-select v-if="type==='add'" filterable v-model="partnerForm.branchId" class="form-input">
          <el-option v-for="branch in branchList" :key="branch.id" :value="branch.id" :label="branch.name">
          </el-option>
        </el-select>
        <span v-else>{{partnerForm.branchName}}</span>
      </el-form-item>
      <el-form-item label="主营类型">
        <el-select multiple v-model="partnerForm.majorTypeId" class="form-input">
          <el-option v-for="major in majorList" :key="major.majorTypeId" :value="major.majorTypeId" :label="major.majorName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="partnerForm.partnerPhone" class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="分店位置">
        <span>{{partnerForm.position.join(',')}}</span>
        <el-button type="primary" icon="el-icon-location-outline" @click="locationSetting">定位</el-button>
      </el-form-item>
      <el-form-item label="分店地址">
        <el-input v-model="partnerForm.partnerAddress" class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="所属区域">
        <region-select v-model="partnerForm.regionData" class="form-input"></region-select>
      </el-form-item>
      <el-form-item label="营业执照">
        <imgs-upload v-model="partnerForm.partnerLicense" :limit="1" :img-width="200" :img-height="200"></imgs-upload>
      </el-form-item>
      <el-form-item label="银行卡号">
        <el-input v-model="partnerForm.partnerBankNo" class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="开户银行">
        <el-input v-model="partnerForm.partnerBankInfo" class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="微信商户号">
        <el-input v-model="partnerForm.partnerWechatMchId" class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="partnerForm.status" class="form-input">
          <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="text-align:center">
      <el-button size="medium" type="primary" @click="savePartner">确定</el-button>
    </div>

    <el-dialog fullscreen append-to-body class="dialog-fullscreen" title="定位" :visible.sync="openSetting">
      <div style="height:100%;overflow:auto">
        <location-setting v-if="openSetting" v-model="partnerForm.position" :default-address="partnerForm.partnerAddress" @change="addressChange">
        </location-setting>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import BranchApi from 'services/branchApi';

  import PartnerForm from 'models/branch/partnerForm';

  import LocationSetting from 'commonComponents/locationSetting';
  import RegionSelect from 'commonComponents/regionSelect';
  import ImgsUpload from 'commonComponents/imgsUpload';

  export default {
    props: {
      partner: {
        type: Object,
        default () {
          return null
        }
      },
      type: {
        type: String,
        default: 'add'
      },
      dropdownOption: {
        type: Object,
        default () {
          return {};
        }
      }
    },

    data() {
      let type = this.type;
      let partnerForm;
      if (type === 'add') {
        partnerForm = new PartnerForm();
      } else {
        partnerForm = _.cloneDeep(this.partner);
      }
      return {
        loading: false,
        partnerForm,
        statusList: this.i18n.getDropDown('branch.status', [1, 0]),
        openSetting: false,
        majorList: [],
        branchList: []
      };
    },

    created() {
      this.loading = true;
      Promise.all([
        this.setMajorList(),
        this.setBranchList()
      ]).then(majorList => {
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    methods: {
      setMajorList() {
        let dropdownOption = this.dropdownOption;
        let majorList = dropdownOption.majorList;
        if (majorList !== undefined) {
          this.majorList = majorList;
          return Promise.resolve(majorList);
        }

        return BranchApi.getMajorList().then(majorList => {
          this.majorList = majorList;
          dropdownOption.majorList = majorList;
          return majorList;
        });
      },

      setBranchList() {
        let dropdownOption = this.dropdownOption;
        let branchList = dropdownOption.branchList;
        if (branchList !== undefined) {
          this.branchList = branchList;
          return Promise.resolve(branchList);
        }

        return BranchApi.getBranchList().then(branchList => {
          this.branchList = branchList;
          dropdownOption.branchList = branchList;
          return branchList;
        });
      },

      locationSetting() {
        this.openSetting = true;
      },

      addressChange(position, address) {
        this.openSetting = false;
        this.partnerForm.partnerAddress = address;
      },

      savePartner() {
        let partnerForm = this.partnerForm;
        let code = partnerForm.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`branch.error.partner.${code}`);
          this.$message(msg);
          return;
        }

        if (this.type === 'add') {
          this.addPartner(partnerForm);
        } else {
          this.updatePartner(partnerForm);
        }
      },

      addPartner(partnerForm) {
        this.loading = true;
        BranchApi.addPartner(partnerForm).then(msg => {
          this.loading = false;
          this.$alert('分店新增成功', '信息', {
            callback: () => {
              this.$emit('save-success');
            }
          });
        }).catch(() => {
          this.loading = false;
        });
      },

      updatePartner(partnerForm) {
        this.loading = true;
        BranchApi.updatePartner(partnerForm).then(msg => {
          this.loading = false;
          this.$alert('分店修改成功', '信息', {
            callback: () => {
              this.$emit('save-success');
            }
          });
        }).catch(() => {
          this.loading = false;
        });
      }
    },

    components: {
      LocationSetting,
      RegionSelect,
      ImgsUpload
    }
  };

</script>

<style lang="scss" scoped>
  @import '~viewStyle/dataForm';

</style>
